<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title>script.aculo.us Unit test file</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <script src="../../lib/prototype.js" type="text/javascript"></script>
  <script src="../../src/scriptaculous.js" type="text/javascript"></script>
  <script src="../../src/unittest.js" type="text/javascript"></script>
  <link rel="stylesheet" href="../test.css" type="text/css" />
  <style type="text/css" media="screen">
    #rotfl {
      color: red;
      font-family: serif;
      font-style: italic;
      font-size: 40px;
      background: #fed;
      padding: 1em;
      width: 400px;
    } 
    .final {
      color: #fff;
      font-style: italic;
      font-size: 20px;
      background: #000;
      opacity: 0.5;
    }
  </style>
</head>
<body>
<h1>script.aculo.us Unit test file</h1>
<p>
  Test effect scenes
</p>
<!-- Log output -->
<div id="testlog"> </div>

<div class="morphing blub" style="font-size:25px;color:#f00">Well</div>
<div class="morphing">You know</div>
<div id="blah" style="border:1px solid black;width:100px">Whoo-hoo!</div>

<div id="error_message">ERROR MESSAGE</div>
<div id="error_message_2">SECOND ERROR MESSAGE</div>
<div id="error_message_3" style="border:1px solid red; width:100px; color: #f00">THIRD ERROR MESSAGE</div>

<ul class="error-list" id="error_test_ul">
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit,</li>
  <li>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
  <li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</li>
  <li>nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in</li>
  <li>reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</li>
</ul>

<div id="rotfl">ROTFL</div>

<!-- Tests follow -->
<script type="text/javascript" language="javascript" charset="utf-8">

new Test.Unit.Runner({
  
  testElementMorph: function() { with(this) {
    $('error_test_ul').morph('font-size:40px', {duration: 0.5}).setStyle({marginRight:'17px'});
    $('error_message_2').morph({
      fontSize:         '20px',
      color:            '#f00',
      backgroundColor:  '#ffffff'
    },
    {
      duration:0.5
    });
    $('error_message_3').morph('final', {duration:0.5});
    wait(600,function(){
      assertEqual('17px', $('error_test_ul').getStyle('margin-right'));
      assertEqual('40px', $('error_test_ul').getStyle('font-size'));
      assertEqual('#ffffff', $('error_message_2').getStyle('background-color').parseColor());
      assertEqual('20px', $('error_message_2').getStyle('font-size'));
      assertEqual('italic', $('error_message_3').getStyle('font-style'));
      assertEqual('20px', $('error_message_3').getStyle('font-size'));
      assertEqual(.5, $('error_message_3').getStyle('opacity'));
      assertEqual('', $('error_message_3').style.fontSize);
      // chaining morphs
      $('error_message').morph('font-size:17px').morph('opacity:0',{delay:3});
      wait(4100,function(){ // 3000ms delay + 1000ms default duration
        assertEqual(0, $('error_message').getOpacity());
      });
    });
  }},
  
  testTransformBySelector: function() { with(this) {
    new Effect.Transform([
      { 'ul.error-list li': 'font-size:20px;text-indent:40pt' }
    ],{ duration: 0.5 }).play();
    
    wait(700,function(){
      var idx = 0;
      $A($('error_test_ul').cleanWhitespace().childNodes).each(function(node){
        assertEqual('20px', $(node).getStyle('font-size'));
        assertEqual('40pt', $(node).getStyle('text-indent'));
        idx++;
      });
      assertEqual(5, idx);
    });
  }},
  
  testTransformUsesCSSClassPresets: function() { with(this) {
    assertEqual('40px', $('rotfl').getStyle('font-size'));
    
    // Render the effect at half-way through, font-size should be
    // exactly half-way between original and target
    new Effect.Transform([
      { 'rotfl': 'font-size:20px;text-indent:40pt;background-color:#888' }
    ],{ sync:true }).play().render(0.5);
    
    wait(1100,function(){
      // shoould be 30px = 40px + (20px-40px)/2
      assertEqual('30px', $('rotfl').getStyle('font-size'));
    });
  }},
  
  testTransformMultiple: function() { with(this) {
    var transformation = new Effect.Transform([
      { 'div.morphing': 'font-size:20px;padding-left:40em;opacity:0.5' },
      { 'blah'        : 
        'width:480px;border-width:10px;border-right-width:20px;' +
        'margin:20px;margin-bottom:-20px;font-size:30px;' +
        'background:#954' }
    ],{ duration: 0.5 });
    
    var generatedEffect = transformation.play();
    
    assertEqual(3, generatedEffect.effects.length);
    
    wait(700, function(){
      // have a look at the generated color transforms for the 3rd found element
      // which is the "blah" div
      assertEqual('blah', generatedEffect.effects[2].element.id);
      assertEnumEqual([255,255,255], 
        generatedEffect.effects[2].transforms.detect( function(transform){
          return (transform.style == 'background-color')
        }).originalValue);
      assertEnumEqual([153,85,68], 
        generatedEffect.effects[2].transforms.detect( function(transform){
          return (transform.style == 'background-color')
      }).targetValue);
      
      assertEqual('20px', $$('div.morphing').first().getStyle('font-size'));
      assertEqual('20px', $$('div.morphing').last().getStyle('font-size'));
      assertEqual('30px', $('blah').getStyle('font-size'));
      
      // border-width/border-right-width should be set independently
      assertEqual('10px', $('blah').getStyle('border-top-width'));
      assertEqual('10px', $('blah').getStyle('border-bottom-width'));
      assertEqual('10px', $('blah').getStyle('border-left-width'));
      assertEqual('20px', $('blah').getStyle('border-right-width'));
      
      // colors should assume transition from 
      // #ffffff (white) if original was transparent
      // we now should have arrived at the given color
      assertEqual('#995544', $('blah').getStyle('background-color').parseColor());
      
      // play again = should have same values
      transformation.play();
      wait(700, function(){
        assertEqual('20px', $$('div.morphing').first().getStyle('font-size'));
        assertEqual('20px', $$('div.morphing').last().getStyle('font-size'));
        assertEqual('30px', $('blah').getStyle('font-size'));
        
        $('blah').setStyle({'font-size':'100px'});
        assertEqual('100px', $('blah').getStyle('font-size'));        
        transformation.play();
        wait(700, function(){
          assertEqual('30px', $('blah').getStyle('font-size'));
          
          new Effect.Transform([
            { 'blah': 'color: #80d980; background: #208020' }
          ],{ duration: 1.1 }).play();
          wait(1500, function(){
            assertEqual('#80d980', $('blah').getStyle('color').parseColor());
            assertEqual('#208020', $('blah').getStyle('background-color').parseColor());
          });
        });
      });
    });
  }}

});

</script>
</body>
</html>
